<script setup lang="ts">
import { NCard, NSpace, NScrollbar, NButton, NIcon } from 'naive-ui'
import { Edit, Trash, Plus } from '@vicons/tabler'

interface ShortcutCommand {
  name: string
  content: string
}

const props = defineProps<{
  commands: ShortcutCommand[]
}>()

const emit = defineEmits<{
  (e: 'edit', index: number): void
  (e: 'remove', index: number): void
  (e: 'add'): void
}>()
</script>

<template>
  <n-card
    style="width: 600px"
    title="管理快捷指令"
    :bordered="false"
    size="huge"
    role="dialog"
    aria-modal="true"
  >
    <template #header-extra>
      <div
        class="flex items-center justify-center gap-2 cursor-pointer bg-gray-100 p-2 rounded hover:bg-gray-200"
        @click="emit('add')"
      >
        <n-icon :component="Plus" size="20" />
        <span class="text-gray-500 text-12px font-medium">添加</span>
      </div>
    </template>
    <n-space vertical>
      <n-scrollbar style="max-height: 300px">
        <div class="suggestion-list px-3">
          <div
            v-for="(command, index) in commands"
            :key="index"
            class="suggestion-item py-2 px-3 rounded-md border-1px border-gray-300 border-solid mb-2 hover:bg-gray-100 cursor-pointer"
          >
            <n-space justify="space-between">
              <span>{{ command.name }} - {{ command.content }}</span>
              <n-space>
                <n-button @click="emit('edit', index)" type="info" size="small" text>
                  <template #icon>
                    <n-icon :component="Edit" size="15" />
                  </template>
                </n-button>
                <n-button @click="emit('remove', index)" type="error" size="small" text>
                  <template #icon>
                    <n-icon :component="Trash" size="15" />
                  </template>
                </n-button>
              </n-space>
            </n-space>
          </div>
        </div>
      </n-scrollbar>
    </n-space>
  </n-card>
</template>

<style scoped>
.suggestion-list {
  padding: 8px;
}

.suggestion-item {
  padding: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.suggestion-item:last-child {
  border-bottom: none;
}
</style>